<template>
  <div>
    <div id="app">
      <div class="add">
        编号:<input type="text" v-model="id" v-setfocus v-mycolor="'red'" />
        品牌名称:<input
          type="text"
          v-model="name"
          v-mycolor="'hotpink'"
          @keyup.enter="add"
        />&nbsp;
        <input type="button" value="添加" @click="add" />
      </div>
      <div class="add">
        品牌名称:<input
          type="text"
          placeholder="请输入搜索条件"
          v-mycolor="'#0094ff'"
          v-model="userKey"
        />
      </div>
      <div>
        <table class="tb">
          <tbody>
            <tr>
              <th>编号</th>
              <th>品牌名称</th>
              <th>创立时间</th>
              <th>操作</th>
            </tr>
            <tr v-for="(value, index) in search" :key="index">
              <td>{{ value.id }}</td>
              <td>{{ value.name }}</td>
              <!-- 记得调用 (全局过滤或局部过滤器)-->
              <td>{{ value.time | dateForm }}</td>
              <td>
                <a href="#" @click="del(id)">删除</a>
                <!-- 别忘了传参(index) -->
              </td>
            </tr>
            <tr v-show="search.length == 0">
              <td colspan="4">没有任何数据,请先添加</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
//引入全局过滤器函数
import { dateForm } from "@/utils/myfilters.js";
//引入全局自定义指令
import { mycolor } from "@/utils/mydirectives.js";
export default {
  data() {
    return {
      //定义双向绑定数据属性
      userKey: "",
      id: "",
      name: "",
      list: [
        {
          id: 1,
          name: "BMW",
          time: new Date(),
        },
        {
          id: 2,
          name: "BYD",
          time: new Date(),
        },
        {
          id: 3,
          name: "奥迪",
          time: new Date(),
        },
      ],
    };
  },
  methods: {
    add() {
      let newobj = { id: this.id, name: this.name, time: new Date() };
      this.list.push(newobj);
    },
    // del(index) {
    //   // splice(规定添加/删除项目的位置, 要删除的项目数量, 向数组添加的新项目。) 方法向/从数组中添加/删除项目，然后返回被删除的项目。
    //   // arr.splice(2,0,"William")增加
    //   this.list.splice(index, 1);
    // },
    del(id) {
      for (let i = 0; i < this.list.length; i++) {
        if (this.list[i].id == id) {
          console.log(id);
          this.list.splice(i, 1);
          break;
        }
      }
    },
  },
  //过滤器
  filters: {
    //全局过滤器
    dateForm,
  },
  //钩子函数
  // mounted() {
  //   console.log(this.$refs);
  //   this.$refs.id.focus();
  // },
  //自定义指令,还可以注册指令
  directives: {
    setfocus: {
      inserted(el, binding) {
        // console.log("a111a");
        // 实现业务处理
        el.focus();
        // el.style.borderColor = binding.value;
      },
    },

    // mycolor: {
    //   inserted(el, binding) {
    //     el.style.color = binding.value;
    //     el.style.borderColor = binding.value;
    //   },
    // },

    mycolor,
    //全局指令
  },
  computed: {
    search() {
      let arr = [];
      console.log(this.userKey);
      for (let i = 0; i < this.list.length; i++) {
        // 任何字符串都包含空字符串
        if (
          this.list[i].name
            .toLowerCase()
            .indexOf(this.userKey.toLowerCase()) !== -1
        ) {
          arr.push(this.list[i]);
        }
      }
      return arr;
    },
  },
};
</script>

<style lang="less" scoped>
#app {
  width: 600px;
  margin: 10px auto;
}

.tb {
  border-collapse: collapse;
  width: 100%;
}

.tb th {
  background-color: #0094ff;
  color: white;
}

.tb td,
.tb th {
  padding: 5px;
  border: 1px solid black;
  text-align: center;
}

.add {
  padding: 5px;
  border: 1px solid black;
  margin-bottom: 10px;
}
</style>